@extends('layouts.console_header')

@section('title', '新增/修改banner')

@section('resources')
    @parent
    <!-- css 文件 -->
<style>
    .banner_modify{position: relative;}
    input[name="h5content"]{border: 1px solid #d6d7dc;height: 30px;width: 400px;margin-left: 20px;padding: 0 5px;}
    #h5_content{margin: 10px 0;display: none;}
    #shop_content{margin: 10px 130px;display: none;}
    #shop_content div input[name="shopname"]{border: 1px solid #000;height: 30px;width: 200px;padding: 0 5px;}
    #shop_content div #search_shop{border: 1px solid #d6d7dc;height: 35px;width: 100px;background-color: #9955c6;color: #fff;cursor: pointer;}
    #shop_content ul{border: 1px solid #d6d7dc;min-height: 80px;width: 800px;margin: 20px 0;padding: 5px;}
    #shop_content ul li{margin: 5px 10px;float: left;}
    .banner_picture .banner_pic{margin-top: 20px;position: relative;width: 200px;height: 100px;margin-left: 30px;}
    .banner_picture .pic_close{position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;margin: 0;}
    #shop_list{overflow: hidden;margin-top: 20px;display: none;}
    #shop_list p{float: left;margin: 0 50px;width: 65px;}
    #shop_list p img{width: 60px;margin-top: 10px;}
    #shop_list input[name='color']{width: 100px;height: 10px;padding: 5px;border: 1px solid #808080;}
    .shop_list_h5{width: 360px;height: 640px;position: absolute;top: 15px;right: 20px;display: none;}
    .shop_list_h5 .thumbnail{width: 360px;height: 640px;}
    .shop_list_h5 .thumbnail .title_pic img{width: 100%;}
    .shop_list_h5 .thumbnail .title_pic img{width: 100%;}
    /*.shop_list_h5 .thumbnail .shop_center{}*/
    .shop_list_h5 .thumbnail #shop_content_A{overflow: hidden;width: 340px;margin: 20px 10px 40px;background-color: #fff;border-radius: 5px;display: none;}
    .shop_list_h5 .thumbnail #shop_content_B{overflow: hidden;width: 300px;padding: 20px 30px 40px;border-radius: 5px;display: none;}
    .shop_list_h5 .thumbnail #shop_content_C{overflow: hidden;width: 360px;padding-top: 20px;display: none;}
    .shop_list_h5 .thumbnail #shop_content_A li{float: left;width: 340px;height: 90px;position: relative;}
    .shop_list_h5 .thumbnail #shop_content_A li .choose_shop{float: left;width: 320px;height: 80px;line-height: 80px;margin: 5px 10px;text-align: center;border: 1px dashed #808080;border-radius: 5px;font-size: 18px;}
    .shop_list_h5 .thumbnail #shop_content_A li .shop_content_mark{position: absolute;top: 0;left: 0;width: 340px;height: 90px;background: rgba(0,0,0,0.5);display: none;z-index: 100;}
    .shop_list_h5 .thumbnail #shop_content_A li .shop_content_mark input{width: 200px;height: 20px;border-radius: 5px;padding: 5px;position: absolute;left: 15px;top: 30px;}
    .shop_list_h5 .thumbnail #shop_content_A li .shop_content_mark .delect_shop{position: absolute;right: 15px;top: 30px;height: 30px;width: 80px;line-height: 30px;background: #fff;text-align: center;border-radius: 5px;color: #9955c6;cursor: pointer;}
    .shop_list_h5 .thumbnail #shop_content_A li .choose_shop_ok{width: 100%;height: 90px;overflow: hidden;border-bottom: 1px solid #eee;}
    .shop_list_h5 .thumbnail #shop_content_A li .choose_shop_ok .shop_picture{width: 60px;height: 60px;float: left;margin: 15px 0 0 20px;}
    .shop_list_h5 .thumbnail #shop_content_A li .choose_shop_ok div{float: left;margin: 15px 0 0 20px;}
    .shop_list_h5 .thumbnail #shop_content_A li .choose_shop_ok div .title{font-size: 16px;margin-bottom: 10px;}
    .shop_list_h5 .thumbnail #shop_content_A li .choose_shop_ok div p{font-size: 14px; overflow:hidden;text-overflow:ellipsis; -o-text-overflow:ellipsis;white-space:nowrap;width:210px;}
    .shop_list_h5 .thumbnail #shop_content_B li{float: left;width: 300px;height: 210px;position: relative;margin-bottom: 20px;}
    .shop_list_h5 .thumbnail #shop_content_B li .choose_shop{float: left;width: 280px;height: 200px;line-height: 210px;margin: 5px 10px;text-align: center;border: 1px dashed #808080;border-radius: 5px;font-size: 18px;}
    .shop_list_h5 .thumbnail #shop_content_B li .shop_content_mark{position: absolute;top: 0;left: 0;width: 300px;height: 210px;background: rgba(0,0,0,0.5);display: none;z-index: 100;}
    .shop_list_h5 .thumbnail #shop_content_B li .shop_content_mark input{width: 260px;height: 20px;border-radius: 5px;padding: 5px;position: absolute;left: 15px;top: 55px;}
    .shop_list_h5 .thumbnail #shop_content_B li .shop_content_mark .delect_shop{position: absolute;right: 100px;bottom: 55px;height: 30px;width: 100px;line-height: 30px;background: #fff;text-align: center;border-radius: 5px;color: #9955c6;cursor: pointer;}
    .shop_list_h5 .thumbnail #shop_content_B li .choose_shop_ok{width: 300px;height: 210px;position: relative;}
    .shop_list_h5 .thumbnail #shop_content_B li .choose_shop_ok .shop_picture{width: 300px;height: 210px;position: absolute;top: 0;left: 0;}
    .shop_list_h5 .thumbnail #shop_content_B li .choose_shop_ok div{position: absolute;bottom: 0;left: 0;width: 280px;background: rgba(0,0,0,0.5);color: #fff;padding: 7px 10px;}
    .shop_list_h5 .thumbnail #shop_content_B li .choose_shop_ok div .title{font-size: 16px;margin-bottom: 10px;}
    .shop_list_h5 .thumbnail #shop_content_B li .choose_shop_ok div p{font-size: 14px; overflow:hidden;text-overflow:ellipsis; -o-text-overflow:ellipsis;white-space:nowrap;width:100%;}
    .shop_list_h5 .thumbnail #shop_content_C li{float: left;width: 150px;height: 200px;margin-left: 20px;position: relative;background-color: #fff;margin-bottom: 20px;}
    .shop_list_h5 .thumbnail #shop_content_C li .choose_shop{float: left;width: 130px;height: 190px;line-height: 210px;margin: 5px 10px;text-align: center;border: 1px dashed #808080;border-radius: 5px;font-size: 18px;background-color: #fff;}
    .shop_list_h5 .thumbnail #shop_content_C li .shop_content_mark{position: absolute;top: 0;left: 0;width: 150px;height: 200px;background: rgba(0,0,0,0.5);display: none;z-index: 100;}
    .shop_list_h5 .thumbnail #shop_content_C li .shop_content_mark input{width: 110px;height: 30px;border-radius: 5px;padding: 5px;position: absolute;left: 15px;top: 55px;}
    .shop_list_h5 .thumbnail #shop_content_C li .shop_content_mark .delect_shop{position: absolute;right: 15px;bottom: 20px;height: 30px;width: 60px;line-height: 30px;background: #fff;text-align: center;border-radius: 5px;color: #9955c6;cursor: pointer;}
    .shop_list_h5 .thumbnail #shop_content_C li .choose_shop_ok{width: 300px;height: 210px;}
    .shop_list_h5 .thumbnail #shop_content_C li .choose_shop_ok .shop_picture{width: 130px;height: 90px;margin: 10px;}
    .shop_list_h5 .thumbnail #shop_content_C li .choose_shop_ok div{width: 130px;margin: 10px;}
    .shop_list_h5 .thumbnail #shop_content_C li .choose_shop_ok div .title{font-size: 16px;margin-bottom: 10px;}
    .shop_list_h5 .thumbnail #shop_content_C li .choose_shop_ok div p{font-size: 14px; overflow:hidden;text-overflow:ellipsis; -o-text-overflow:ellipsis;white-space:nowrap;width:100%;}
    .shop_list_h5 .thumbnail .add_button p{width: 200px;height: 30px;margin: 0 70px;background-color: #9955c6;border-radius: 5px;text-align: center;line-height: 30px;color: #fff;cursor: pointer;}
</style>
@endsection

@section('content')
<!--  html内容  -->
<section class="user_list">
	<div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
		<p class="fz_14 account_title fl" style="border: none;">
		    <span style="color: #7f7f7f;"><a href="/console/index">首页</a>>用户版运营><a href="/console/user/banner/list?cityid={{$cityid}}">Banner管理</a>></span>
        @if($action == 'add')
            <span class="co_violet">新增</span>
        @else
            <span class="co_violet">修改</span>
        @endif
        </p>
		<a onclick="history.go(-1);" href="#"><p class="fr tc back_btn">返回</p></a>
	</div>
	<div class="banner_modify">
		<p class="fz_18 banner_banner">首页Banner</p>
		<form action="" method="" id="banner_content">
		    <input type="hidden" name="cityid" value="{{$cityid}}" />
		    <input type="hidden" name="bannerid" value="{{$bannerid}}" />
		    <input type="hidden" name="action" value="{{$action}}" />
            <div class="banner_username">
                <p class="fl" style="width: 100px;text-align: right;margin: 0 30px 0 0;">
                    <span class="co_orange">*</span>
                    <span>名称</span>
                </p>
                <input type="text" name="name" value="{{$name}}">
            </div>
            <div class="banner_picture">
                <div class="form-group jingyzz oh">
                    <label class="fl" style="width: 100px;text-align: right;">图片</label>
                    <div class="oh fl pic_box_outer" style="margin-left: 0px;">
                        <input style="left: 31px;height: 130px;" type="file"  id="banner" multiple="multiple"  style="width:250px;height: 130px;" onchange=javascript:setImagePreviews('bannerid','banner','banner',client,'banner','input[name="banner"]','.progress'); />
                        <span class="upload_pic fl">+上传图片</span>
                        <div class="fl pictureshow" id="bannerid"></div>
                    </div>
                </div>
                <div class="progress">  </div>
                @if($action == 'add')
                    
                @else
                    <p class="banner_pic" style="margin-left: 130px;width: 300px;height: 100px;">
                        <img style="margin-left: 0;width: 300px;height: 100px;" src="{{env('IMAGE_DOMAIN')}}{{$url}}" alt="">
                        <img class="pic_close" src="{{env('IMAGE_DOMAIN')}}images/access_delete.png?v={{env('IMAGE_VERSION')}}" alt="">
                    </p>
                @endif
                 <input type="hidden" name="banner" value="{{$url}}">
            </div>
            <div class="banner_size" style="margin: 20px 0;">
                <p style="width: 100px;text-align: right;margin-right: 30px;">发布类型</p>
                <select name="isglobal">
                    @if($isglobal == '1')
                        <option value="0">当地</option>
                        <option value="1" selected="selected">全国</option>
                    @else
                        @if(($roleid == 1)||($roleid==2) || ($roleid==5) || ($roleid==7))
                            <option value="0" selected="selected">当地</option>
                            <option value="1">全国</option>
                        @else
                            <option value="0" selected="selected">当地</option>
                        @endif
                    @endif
                </select>
            </div>

            <div class="banner_order" style="margin: 20px 0;">
                <p class="fl" style="width: 100px;text-align: right;margin-right: 30px;">显示顺序</p>
                <select style="width: 120px;height: 38px;border: 1px solid #d6d7dc;padding-left: 10px;" name="sort">
                    <option>--请选择排序--</option>
                @if($sort == 1)
                    <option value="1" selected>第一</option>
                    <option value="2">第二</option>
                    <option value="3">第三</option>
                    <option value="4">第四</option>
                    <option value="5">第五</option>
                    <option value="6">第六</option>
                @elseif($sort == 2)
                    <option value="1">第一</option>
                    <option value="2" selected>第二</option>
                    <option value="3">第三</option>
                    <option value="4">第四</option>
                    <option value="5">第五</option>
                    <option value="6">第六</option>
                @elseif($sort == 3)
                    <option value="1">第一</option>
                    <option value="2">第二</option>
                    <option value="3" selected>第三</option>
                    <option value="4">第四</option>
                    <option value="5">第五</option>
                    <option value="6">第六</option>
                @elseif($sort == 4)
                    <option value="1">第一</option>
                    <option value="2">第二</option>
                    <option value="3">第三</option>
                    <option value="4" selected>第四</option>
                    <option value="5">第五</option>
                    <option value="6">第六</option>
                @elseif($sort == 5)
                    <option value="1">第一</option>
                    <option value="2">第二</option>
                    <option value="3">第三</option>
                    <option value="4">第四</option>
                    <option value="5" selected>第五</option>
                    <option value="6">第六</option>
                @elseif($sort == 6)
                    <option value="1">第一</option>
                    <option value="2">第二</option>
                    <option value="3">第三</option>
                    <option value="4">第四</option>
                    <option value="5">第五</option>
                    <option value="6" selected>第六</option>
                @else
                    <option value="1">第一</option>
                    <option value="2">第二</option>
                    <option value="3">第三</option>
                    <option value="4">第四</option>
                    <option value="5">第五</option>
                    <option value="6">第六</option>
                @endif
                </select>
            </div>
            <div class="banner_size" style="margin: 20px 0;">
                <p style="width: 100px;text-align: right;margin-right: 30px;">是否需要登录</p>
                <select name="islogin">
                    @if($islogin == '1')
                        <option value="0">不需要</option>
                        <option value="1" selected="selected">需要</option>
                    @else
                        <option value="0" selected="selected">不需要</option>
                        <option value="1">需要</option>
                    @endif
                </select>
            </div>
            <div class="banner_size" style="margin: 20px 0;">
                <p style="width: 100px;text-align: right;margin-right: 30px;">生效时间</p>
                <input style="width: 128px;height: 28px;border: 1px solid #d6d7dc;padding: 0 5px;" type="date" name="starttime" value="{{$starttime}}" min="{{date('Y-m-d')}}" />
            </div>
            <div class="banner_order" style="height: 40px;line-height: 40px;">
                <p class="fl" style="width: 100px;text-align: right;margin-right: 10px;">跳转链接</p>
                @if($type == 'h5')
                    <input type="radio" name="type" value="h5" checked>H5页面
                    <input type="radio" name="type" value="shop">商家详情
                    <input type="radio" name="type" value="blank">空白页面
                    {{--<input type="radio" name="type" value="shoplist">商家列表--}}
                @elseif($type == 'shop')
                    <input type="radio" name="type" value="h5">H5页面
                    <input type="radio" name="type" value="shop" checked>商家详情
                    <input type="radio" name="type" value="blank">空白页面
                    {{--<input type="radio" name="type" value="shoplist">商家列表--}}
                @elseif($type == 'blank')
                    <input type="radio" name="type" value="h5">H5页面
                    <input type="radio" name="type" value="shop">商家详情
                    <input type="radio" name="type" value="blank" checked>空白页面
                    {{--<input type="radio" name="type" value="shoplist">商家列表--}}
                @elseif($type == 'shoplist')
                    <input type="radio" name="type" value="h5">H5页面
                    <input type="radio" name="type" value="shop">商家详情
                    <input type="radio" name="type" value="blank">空白页面
                    {{--<input type="radio" name="type" value="shoplist" checked>商家列表--}}
                @else
                    <input type="radio" name="type" value="h5">H5页面
                    <input type="radio" name="type" value="shop">商家详情
                    <input type="radio" name="type" value="blank">空白页面
                    {{--<input type="radio" name="type" value="shoplist">商家列表--}}
                @endif
            </div>
            <div id="h5_content">
                <p class="fl" style="width: 100px;text-align: right;margin-right: 10px;">url:</p>
                <input type="text" name="h5content" value="{{$content}}">
            </div>
            <div id="shop_content">
                <div>
                    <input type="text" name="shopname" value="" />
                    <input type="button" value="查询" id="search_shop">
                </div>
                <ul id="search_result" class="oh">
                @if($shopid != '')
                    <li><input type="radio" name="shopid" value="{{$shopid}}" checked><span>{{$shopname}}</span></li>
                @endif
                </ul>
            </div>
            <div id="shop_list">
                <p class="thumbnail1">
                    <input type="radio" name="thumbnail" value="thumbnail_A">
                    <span>样式A</span>
                    <img src="{{env('IMAGE_DOMAIN')}}images/console/shop_list1.jpg?v={{env('IMAGE_VERSION')}}" alt="">
                </p>
                <p class="thumbnail2">
                    <input type="radio" name="thumbnail" value="thumbnail_B">
                    <span>样式B</span>
                    <img src="{{env('IMAGE_DOMAIN')}}images/console/shop_list2.jpg?v={{env('IMAGE_VERSION')}}" alt="">
                </p>
                <p class="thumbnail3">
                    <input type="radio" name="thumbnail" value="thumbnail_C">
                    <span>样式C</span>
                    <img src="{{env('IMAGE_DOMAIN')}}images/console/shop_list3.jpg?v={{env('IMAGE_VERSION')}}" alt="">
                </p>
                背景色：#<input id="background_color" type="text" name="color" value="" placeholder="请填入6位色号" onpropertychange="backgroundColor();" oninput="backgroundColor();" maxlength="6" >
            </div>
            <div style="width: 1160px;margin: 20px 10px;" class="oh">
                <input class="sure fl" type="button" id="submit_banner" style="background-color: #9955c6;" value="保存"/>
                <input class="cancel fr" type="button" value="取消" onclick="javascript:history.back(-1);" />
            </div>
        </form>
        <ul class="shop_list_h5">
            <li class="thumbnail">
                <p class="title_pic">
                    <img src="{{env('IMAGE_DOMAIN')}}images/h5/goodshop/goodshop_bg.jpg" alt="">
                </p>
                <ul id="shop_content_A">
                    
                </ul>
                <ul id="shop_content_B">
                    
                </ul>
                <ul id="shop_content_C">
                    
                </ul>
                <div class="add_button" style="margin-top: 20px;">
                    <p>增加商家</p>
                </div>
            </li>
        </ul>
        <input name="list1SortOrder" type="hidden" />
    </div>
</section>
@endsection

@section('scriptResources')
    @parent
    <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
    <script src="{{env('JS_DOMAIN')}}js/jquery.dragsort-0.5.2.min.js?v={{env('JS_VERSION')}}" type="text/javascript" charset="utf-8"></script>
    <script>
        'use strict';
        var OSS = OSS.Wrapper;
        var STS = OSS.STS;
        var client = new OSS({
            region: 'oss-cn-beijing',
            accessKeyId: '{{$AccessKeyId}}',
            accessKeySecret: '{{$AccessKeySecret}}',
            stsToken: '{{$SecurityToken}}',
            bucket: 'fbw',
            secure: true
        });
        var adminUserId = '{{$adminUserId}}';
        var type = "{{$type}}";
        var cityid = '{{$cityid}}';

        if (type == "h5") {
            $("#h5_content").show();
            $("#shop_content").hide();
            $("#shop_list").hide();
        }
        if (type == "shop") {
            $("#h5_content").hide();
            $("#shop_content").show();
            $("#shop_list").hide();
        }
        if (type == "url") {
            $("#h5_content").hide();
            $("#shop_content").hide();
            $("#shop_list").hide();
        }
        if (type == "shoplist") {
            $("#h5_content").hide();
            $("#shop_content").hide();
            $("#shop_list").show();
            $(".shop_list_h5").show();
        }
        $("input[name = 'type']").click(function () {
            if ($(this).val() == 'h5'){
                $("#h5_content").show();
                $("#shop_content").hide();
                $("#shop_list").hide();
                $(".shop_list_h5").hide();
            }else if($(this).val() == 'shop'){
                $("#h5_content").hide();
                $("#shop_content").show();
                $("#shop_list").hide();
                $(".shop_list_h5").hide();
            }else if($(this).val() == 'shoplist'){
                $("#h5_content").hide();
                $("#shop_content").hide();
                $("#shop_list").show();
                $(".shop_list_h5").show();
                var img_src = $('#banner0').attr('src')
                $('.title_pic img').prop('src',img_src)
            }else{
                $("#h5_content").hide();
                $("#shop_content").hide();
                $("#shop_list").hide();
                $(".shop_list_h5").hide();
            }
        })

        //上传图片
        var applyTokenDo = function (func) {
           return func(client);
        };
        var progress = function (p) {
            return function (done) {
                var bar = document.getElementById('progress-bar');
                bar.style.width = Math.floor(p * 600) + 'px';
                bar.innerHTML = Math.floor(p * 100) + '%';
                done();
                console.log(p);
                if(p==1){
                    $('#progress-bar').remove();
                    bar.style.width = 0+'px';
                    bar.innerHTML = 0 + '%';
                }
            }
        };
        var prog=$('<div id="progress-bar"class="progress-bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100" style="min-width: 1px;width: 0px;background: #9955c6;border-radius: 10px;margin: 10px 100px;padding-left: 10px;">0%</div>');
        // 图片显示
        function setImagePreviews(avalue,inputid,picshow,client,id,ipt,pro) {
            $(pro).prepend(prog);
            var docObj = document.getElementById(inputid);
            var dd = document.getElementById(avalue);
            dd.innerHTML = "";
            var fileList = docObj.files;
            for (var i = 0; i < fileList.length; i++) {
                dd.innerHTML += "<div style='float:left' > <img id='"+ picshow + i + "'  /> </div>";
                var imgObjPreview = document.getElementById(picshow+i); 
                if (docObj.files && docObj.files[i]) {
                    //火狐下，直接设img属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = '150px';
                    imgObjPreview.style.height = '180px';
                    //imgObjPreview.src = docObj.files[0].getAsDataURL();
                    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
                }
                else {
                    //IE下，使用滤镜
                    docObj.select();
                    var imgSrc = document.selection.createRange().text;
                    alert(imgSrc)
                    var localImagId = document.getElementById(picshow + i);
                    //必须设置初始大小
                    localImagId.style.width = "150px";
                    localImagId.style.height = "180px";
                    //图片异常的捕捉，防止用户修改后缀来伪造图片
                    try {
                        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                    }
                    catch (e) {

                        alert("您上传的图片格式不正确，请重新选择!");
                        return false;
                    }
                    imgObjPreview.style.display = 'none';
                    document.selection.empty();
                }
            }
            var applyTokenDo1 = function (func) {
               return func(client,id,ipt);
            };
            applyTokenDo1(uploadLogo);
            return true;
        }
        //上传图片
        var uploadLogo = function (client,id,ipt) {
            var timestamp = new Date().getTime();
            var filePath= "temp/photos_" + adminUserId + "_" + timestamp; //文件路径：用户id＋时间戳
            var file = document.getElementById(id).files[0];
            var key = filePath;
            console.log('key:'+ key);
            client.multipartUpload(key, file, {
                progress: progress
            }).then(function (res) {
                // console.log('upload success: %j', res);
                // $('#progress-bar').remove();
                $(ipt).val(key);
                // $().img('').attr('src', 'http://file.fbw-china.com/'+filePath);
            });
        };
        $("#search_shop").click(function() {
            var shopname = $("input[name='shopname']").val();
            if(shopname == '') {
                alert('请输入搜索内容');return;
            }
            $.ajax({
                url : "/console/shop/searchbyname",
                type : "get",
                data : {shopname:shopname,cityid:"{{$cityid}}"},
                dataType: "json",
                success:function (data){
                    if(data.status == 'success') {
                        var data=data.data;
                        var str = '';
                        if(data.length == 0){
                            str = '<li>已上架商家中没有符合的商家</li>';
                        }else {
                            for(var i=0; i<data.length;i++) {
                                var list=data[i];
                                str += '<li><input type="radio" name="shopid" value="'+list.id+'"><span>'+list.name+'</span></li>';
                            }
                        }
                    } else {
                        var str='无商家';
                    }
                    $("#search_result").html(str);
                }
            })
        });

        $("#submit_banner").click(function() {
            $.ajax({
                url : "/console/user/banner/edit",
                type : "post",
                data : $('#banner_content').serialize(),
                dataType: "json",
                success:function (data){
                    if(data.status == 'success') {
                        alert(data.message);
                        window.location.href="/console/user/banner/list?cityid=" + cityid;
                    } else {
                        alert(data.message);
                    }
                }
            })
        });
        $('.pic_close').click(function(){
            $(this).parent().hide();
        })
        //背景色获取
        function backgroundColor(){
            var colorname = $('input[name="color"]').val();
            var abcdef = /^[0-9a-fA-F]{6}$/
            if(colorname.length == 6){
                if(!abcdef.test(colorname)){
                    alert("请填入正确的色号编码")
                }else{
                    $('.shop_list_h5').css('background','#'+colorname)
                }
            }
        }
        if(/msie/i.test(navigator.userAgent))    //ie浏览器   
            {document.getElementById('background_color').onpropertychange=backgroundColor   
        } else{//非ie浏览器，比如Firefox   
            document.getElementById('background_color').addEventListener("input",backgroundColor,false);   
        }
        //拖拽排序
        $("#shop_content_A, #shop_content_B, #shop_content_C").dragsort({ dragSelector: ".shop_content_mark", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
        
        function saveOrder() {
            var data = $("#shop_content_A li").map(function() { return $(this).children().html(); }).get();
            $("input[name=list1SortOrder]").val(data.join("|"));
        };
        var shop_content_A = $('<li class="add_shop">'+
                                    '<div class="choose_shop">+选门店1</div>'+
                                    '<p class="shop_content_mark">'+
                                        '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                        '<span class="delect_shop">删除</span>'+
                                    '</p>'+
                                '</li>'+
                                '<li class="add_shop">'+
                                    '<div class="choose_shop">+选门店2</div>'+
                                    '<p class="shop_content_mark">'+
                                        '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                        '<span class="delect_shop">删除</span>'+
                                    '</p>'+
                                '</li>'+
                                '<li class="add_shop">'+
                                    '<div class="choose_shop">+选门店3</div>'+
                                    '<p class="shop_content_mark">'+
                                        '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                        '<span class="delect_shop">删除</span>'+
                                    '</p>'+
                                '</li>');
        var shop_content_B = $('<li class="add_shop">'+
                                    '<div class="choose_shop">+选门店1</div>'+
                                    '<p class="shop_content_mark">'+
                                        '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                        '<span class="delect_shop">删除</span>'+
                                    '</p>'+
                                '</li>'+
                                '<li class="add_shop">'+
                                    '<div class="choose_shop">+选门店2</div>'+
                                    '<p class="shop_content_mark">'+
                                        '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                        '<span class="delect_shop">删除</span>'+
                                    '</p>'+
                                '</li>');
        var shop_content_C = $('<li class="add_shop">'+
                                    '<div class="choose_shop">+选门店1</div>'+
                                    '<p class="shop_content_mark">'+
                                        '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                        '<span class="delect_shop">删除</span>'+
                                    '</p>'+
                                '</li>'+
                                '<li class="add_shop">'+
                                    '<div class="choose_shop">+选门店2</div>'+
                                    '<p class="shop_content_mark">'+
                                        '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                        '<span class="delect_shop">删除</span>'+
                                    '</p>'+
                                '</li>'+
                                '<li class="add_shop">'+
                                    '<div class="choose_shop">+选门店3</div>'+
                                    '<p class="shop_content_mark">'+
                                        '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                        '<span class="delect_shop">删除</span>'+
                                    '</p>'+
                                '</li>'+
                                '<li class="add_shop">'+
                                    '<div class="choose_shop">+选门店4</div>'+
                                    '<p class="shop_content_mark">'+
                                        '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                        '<span class="delect_shop">删除</span>'+
                                    '</p>'+
                                '</li>');
        var thumbnail_val;
        $('.add_button p').click(function(){
            if(thumbnail_val == 'thumbnail_A'){
                var lisnum = $('#shop_content_A li').length+1;
                var li = $('<li class="add_shop">'+
                                '<div class="choose_shop">+选门店'+lisnum+'</div>'+
                                '<p class="shop_content_mark">'+
                                    '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                    '<span class="delect_shop">删除</span>'+
                                '</p>'+
                            '</li>');
                $('#shop_content_A').append(li);
                if($('#shop_content_A').height() >= 400){
                    $('#shop_content_A').css({"height": "400px","overflow-x": "hidden","overflow-y": 'scroll'})
                }
                add_mouse()
            }else if(thumbnail_val == 'thumbnail_B'){
                var lisnum = $('#shop_content_B li').length+1;
                var li = $('<li class="add_shop">'+
                                '<div class="choose_shop">+选门店'+lisnum+'</div>'+
                                '<p class="shop_content_mark">'+
                                    '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                    '<span class="delect_shop">删除</span>'+
                                '</p>'+
                            '</li>');
                $('#shop_content_B').append(li);
                if($('#shop_content_B').height() >= 400){
                    $('#shop_content_B').css({"height": "400px","overflow-x": "hidden","overflow-y": 'scroll'})
                }
                add_mouse()
            }else if(thumbnail_val == 'thumbnail_C'){
                var lisnum = $('#shop_content_C li').length+1;
                var li = $('<li class="add_shop">'+
                                '<div class="choose_shop">+选门店'+lisnum+'</div>'+
                                '<p class="shop_content_mark">'+
                                    '<input type="text" name="" value="" placeholder="请输入商家编码">'+
                                    '<span class="delect_shop">删除</span>'+
                                '</p>'+
                            '</li>');
                $('#shop_content_A').append(li);
                if($('#shop_content_C').height() >= 400){
                    $('#shop_content_C').css({"height": "400px","overflow-x": "hidden","overflow-y": 'scroll'})
                }
                add_mouse()
            }
                
        })
        $("input[name='thumbnail']").click(function(){
            $("#shop_content_A").empty();
            $("#shop_content_B").empty();
            $("#shop_content_C").empty();
            thumbnail_val = $(this).val();
            if($(this).val() == 'thumbnail_A'){
                // $(".shop_content_all").attr('id','shop_content_A');
                $("#shop_content_A").show();
                $("#shop_content_B").hide();
                $("#shop_content_C").hide();
                $("#shop_content_A").append(shop_content_A);
                add_mouse();
            }else if($(this).val() == 'thumbnail_B'){
                // $(".shop_content_all").attr('id','shop_content_B');
                $("#shop_content_A").hide();
                $("#shop_content_B").show();
                $("#shop_content_C").hide();
                $("#shop_content_B").append(shop_content_B);
                add_mouse();
            }else if($(this).val() == 'thumbnail_C'){
                // $(".shop_content_all").attr('id','shop_content_C');
                $("#shop_content_A").hide();
                $("#shop_content_B").hide();
                $("#shop_content_C").show();
                $("#shop_content_C").append(shop_content_C);
                add_mouse();
            }
        })
        function add_mouse(){
            $(".add_shop").on('mouseenter',function(){
                $(this).children('.shop_content_mark').show();
                $(this).children('.shop_content_mark').children('input').focus();
            });
            $(".add_shop").on('mouseleave',function(){
                $(this).children('.shop_content_mark').siblings().remove();
                $(this).children('.shop_content_mark').hide();
                var choose_shop_ok = $('<div class="choose_shop_ok">'+
                                        '<img class="shop_picture" src="" alt="">'+
                                        '<div>'+
                                            '<p class="title">九大碗dfgsdfgdfgfdg酒店（上海路店）</p>'+
                                            '<p class="address">南昌市青山湖区上海路54号</p>'+
                                        '</div>'+
                                    '</div>');
                $(this).append(choose_shop_ok);
                console.log($(this).val());
            });
            $(".delect_shop").on('click',function(){
                $(this).parent().parent('.add_shop').remove();
            })
        }
    </script>
@endsection